<template>
  <!-- 提货单详情 -->
  <div class="billOrder_styl" v-if="modalShow">
    
    <Modal v-model="modalShow" width="900" class="modal_styl" :footer-hide="true">
      <Spin size="large" fix v-if="spinShow" />
      <p slot="header" style="text-align: center">
        <span>提货单详情</span>
      </p>
      <div class="title_styl">基本信息</div>
      <Form label-position="left" :label-width="110" class="formInfo">
        <Row style="margin-top: 0px">
          <Col :span="9" class="borderRight borderLeft">
          <FormItem label="下单账号">{{ orderInfo.customerName }}</FormItem>
          </Col>
          <Col :span="8" class="borderRight borderLeft">
          <FormItem label="下单手机号">{{ $store.getters.store_userInfo.phone }}</FormItem>
          </Col>
          <Col :span="7" class="borderRight borderLeft">
          <FormItem label="业务经理">{{ orderInfo.personName }}</FormItem>
          </Col>

          <Col :span="9" class="borderRight borderLeft">
          <FormItem label="提货单号">{{ orderInfo.code }}</FormItem>
          </Col>
          <Col :span="8" class="borderRight borderLeft">
          <FormItem label="规格名称">{{ orderInfo.productAttrName }}</FormItem>
          </Col>
          <Col :span="7" class="borderRight borderLeft">
          <FormItem label="单价">{{ orderInfo.nprice }}元</FormItem>
          </Col>

          <Col :span="9" class="borderRight borderLeft">
          <FormItem label="司机姓名">{{ orderInfo.driverName }}</FormItem>
          </Col>
          <Col :span="8" class="borderRight borderRight">
          <FormItem label="车牌号">{{ orderInfo.carNumber }}</FormItem>
          </Col>
          <Col :span="7" class="borderRight">
          <FormItem label="手机号码">{{ orderInfo.driverPhone }}</FormItem>
          </Col>

          <Col :span="9" class="borderRight borderLeft">
          <FormItem label="数量">{{ orderInfo.nnum }}吨</FormItem>
          </Col>
          <Col :span="8" class="borderRight borderLeft">
          <FormItem label="皮重">{{ orderInfo.skinWeight || 0 }}吨</FormItem>
          </Col>
          <Col :span="7" class="borderRight borderLeft ">
          <FormItem label="毛重">{{ orderInfo.grossWeight || 0 }}吨</FormItem>
          </Col>
          <Col :span="9" class="borderRight borderLeft borderBottom">
          <FormItem label="净重">{{ orderInfo.netWeight || 0 }}吨</FormItem>
          </Col>
          <Col :span="8" class="borderRight borderLeft borderBottom">
          <FormItem label="结算量">{{ orderInfo.actNumber || 0 }}吨</FormItem>
          </Col>
          <Col :span="7" class="borderRight borderLeft borderBottom">
          <FormItem label="结算金额">{{ orderInfo.actAmount || 0 }}元</FormItem>
          </Col>
        </Row>
      </Form>
      <div class="title_styl" style="marginTop:20px;">执行信息</div>
      <Row style="text-align: left; padding-top: 30px" class="borderLeft borderRight borderTop borderBottom">
        <Col :span="3" v-for="(item, index) in statusDefaultList" :key="index" class="boxFlex_styl">
        <div class="stepAllLine_styl">
          <p :class="
                      item.isShow == false
                        ? 'stepTitle_styl'
                        : 'stepTitleLight_styl'
                    ">
            <span>{{ item.title }}</span>
          </p>
          <div class="stepMiddle">
            <div v-if="index != 0" :class="
                        item.isShow == false ? 'stepL_styl' : 'stepLineL_styl'
                      "></div>
            <div class="stepEmp_styl" v-if="index == 0"></div>
            <img class="item_styl" :src="item.isShow == false ? item.img : item.imgLight" />
            <div v-if="index != statusDefaultList.length - 1" :class="
                        item.isShow == false ? 'stepR_styl' : 'stepLineR_styl'
                      "></div>
            <div class="stepEmp_styl" v-if="index == statusDefaultList.length - 1"></div>
          </div>
          <p class="stepTime_styl">
            <span v-if="item.time">{{ item.time | timeFormat }}</span>
          </p>
        </div>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      orderInfo: {},
      spinShow: false,
      modalShow: false,
      chooseIndex: 0,
      statusName2: [
        { code: "01", status: "1", name: "预约" },
        { code: "02", status: "23", name: "报到" },
        { code: "03", status: "2", name: "制卡" },
        { code: "04", status: "20", name: "排队" },
        { code: "05", status: "21", name: "叫号" },
        { code: "06", status: "3", name: "门禁入" },
        // { code: "06", status: "4", name: "一次称重" },
        // { code: "06", status: "5", name: "二次称重" },
        { code: "07", status: "7", name: "结算" },
        { code: "08", status: "8", name: "门禁出" }
      ],
      stpeImgList: {
        0: require("@/assets/icons/组 10016.png"),
        1: require("@/assets/icons/1.png"),
        23: require("@/assets/icons/2.png"),
        20: require("@/assets/icons/3.png"),
        13: require("@/assets/icons/4.png"),
        21: require("@/assets/icons/5.png"),
        31: require("@/assets/icons/6.png"),
        3: require("@/assets/icons/组 10002.png"),
        4: require("@/assets/icons/组 10009.png"),
        50: require("@/assets/icons/组 10011.png"),
        5: require("@/assets/icons/组 10012.png"),
        6: require("@/assets/icons/8.png"),
        7: require("@/assets/icons/7.png"),
        81: require("@/assets/icons/组 10013.png"),
        8: require("@/assets/icons/8.png")
      },
      statusDefaultList: [
        {
          status: "0",
          title: "已保存",
          isShow: false,
          img: require("@/assets/icons/组 10017.png"),
          imgLight: require("@/assets/icons/组 10016.png")
        },
        {
          status: "1",
          title: "预约",
          isShow: false,
          img: require("@/assets/icons/01_none.png"),
          imgLight: require("@/assets/icons/1.png")
        },
        {
          status: "23",
          title: "签到",
          isShow: false,
          img: require("@/assets/icons/02_none.png"),
          imgLight: require("@/assets/icons/2.png")
        },
        {
          status: "20",
          title: "排队",
          isShow: false,
          img: require("@/assets/icons/03_none.png"),
          imgLight: require("@/assets/icons/3.png")
        },
        {
          status: "21",
          title: "叫号",
          isShow: false,
          img: require("@/assets/icons/05_none.png"),
          imgLight: require("@/assets/icons/5.png")
        },
        {
          status: "31",
          title: "门禁入安检",
          isShow: false,
          img: require("@/assets/icons/06_none.png"),
          imgLight: require("@/assets/icons/6.png")
        },
        {
          status: "3",
          title: "入厂",
          isShow: false,
          img: require("@/assets/icons/组 10002 (1).png"),
          imgLight: require("@/assets/icons/组 10002.png")
        },
        {
          status: "4",
          title: "一次称重",
          isShow: false,
          img: require("@/assets/icons/组 10009 (1).png"),
          imgLight: require("@/assets/icons/组 10009.png")
        },
        {
          status: "50",
          title: "装卸车",
          isShow: false,
          img: require("@/assets/icons/组 10011 (1).png"),
          imgLight: require("@/assets/icons/组 10011.png")
        },
        {
          status: "5",
          title: "装卸车结束",
          isShow: false,
          img: require("@/assets/icons/组 10012 (1).png"),
          imgLight: require("@/assets/icons/组 10012.png")
        },
        {
          status: "6",
          title: "二次称重",
          isShow: false,
          img: require("@/assets/icons/08_none.png"),
          imgLight: require("@/assets/icons/8.png")
        },
        {
          status: "7",
          title: "结算",
          isShow: false,
          img: require("@/assets/icons/07_none.png"),
          imgLight: require("@/assets/icons/7.png")
        },
        {
          status: "81",
          title: "门禁出安检",
          isShow: false,
          img: require("@/assets/icons/组 10013 (1).png"),
          imgLight: require("@/assets/icons/组 10013.png")
        },
        {
          status: "8",
          title: "出厂",
          isShow: false,
          img: require("@/assets/icons/08_none.png"),
          imgLight: require("@/assets/icons/8.png")
        }
      ],
      statusDefaultListReturn: [
        {
          status: "0",
          title: "已保存",
          isShow: false,
          img: require("@/assets/icons/组 10017.png"),
          imgLight: require("@/assets/icons/组 10016.png")
        },
        {
          status: "1",
          title: "预约",
          isShow: false,
          img: require("@/assets/icons/01_none.png"),
          imgLight: require("@/assets/icons/1.png")
        },
        {
          status: "23",
          title: "签到",
          isShow: false,
          img: require("@/assets/icons/02_none.png"),
          imgLight: require("@/assets/icons/2.png")
        },
        {
          status: "20",
          title: "排队",
          isShow: false,
          img: require("@/assets/icons/03_none.png"),
          imgLight: require("@/assets/icons/3.png")
        },
        {
          status: "21",
          title: "叫号",
          isShow: false,
          img: require("@/assets/icons/05_none.png"),
          imgLight: require("@/assets/icons/5.png")
        },
        {
          status: "31",
          title: "门禁入安检",
          isShow: false,
          img: require("@/assets/icons/06_none.png"),
          imgLight: require("@/assets/icons/6.png")
        },
        {
          status: "3",
          title: "入厂",
          isShow: false,
          img: require("@/assets/icons/组 10002 (1).png"),
          imgLight: require("@/assets/icons/组 10002.png")
        },
        {
          status: "6",
          title: "一次称重",
          isShow: false,
          img: require("@/assets/icons/08_none.png"),
          imgLight: require("@/assets/icons/8.png")
        },

        {
          status: "50",
          title: "装卸车",
          isShow: false,
          img: require("@/assets/icons/组 10011 (1).png"),
          imgLight: require("@/assets/icons/组 10011.png")
        },
        {
          status: "5",
          title: "装卸车结束",
          isShow: false,
          img: require("@/assets/icons/组 10012 (1).png"),
          imgLight: require("@/assets/icons/组 10012.png")
        },

        {
          status: "4",
          title: "二次称重",
          isShow: false,
          img: require("@/assets/icons/组 10009 (1).png"),
          imgLight: require("@/assets/icons/组 10009.png")
        },

        {
          status: "7",
          title: "结算",
          isShow: false,
          img: require("@/assets/icons/07_none.png"),
          imgLight: require("@/assets/icons/7.png")
        },
        {
          status: "81",
          title: "门禁出安检",
          isShow: false,
          img: require("@/assets/icons/组 10013 (1).png"),
          imgLight: require("@/assets/icons/组 10013.png")
        },
        {
          status: "8",
          title: "出厂",
          isShow: false,
          img: require("@/assets/icons/08_none.png"),
          imgLight: require("@/assets/icons/8.png")
        }
      ]
    };
  },
  filters: {
    timeFormat: function (data) {
      return (data + "").substring(5, 16);
    }
  },
  mounted() {},
  methods: {
    openFun(item) {
      console.log("11111111111",item);
      this.getBillInfo(item);
      this.modalShow = true;
    },
    // 提货单详情
    getBillInfo(item) {
      console.log("11111111111",item);
      this.spinShow = true;
      this.httpGet(this.API.API_takeOrderInfo, { id: item.id})
        .then((res) => {
          this.orderInfo = res.data.Bill || {};
          this.statusList = res.data.billLogStatus || [];
          if (this.statusList) {
            for (let item = 0; item < this.statusDefaultList.length; item++) {
              const ele = this.statusDefaultList[item];
              ele.isShow = false;
              ele.time = "";
              for (let value = 0; value < this.statusList.length; value++) {
                const val = this.statusList[value];
                if (val.status == "11") {
                  this.statusDefaultList.splice(
                    item + 1,
                    this.statusDefaultList.length - 1
                  );
                  this.statusDefaultList.push({
                    title: "作废",
                    isShow: true,
                    imgLight: require("@/assets/icons/15.png"),
                    time: val.time
                  });
                  this.spinShow = false;
                  return;
                }
                if (ele.status == val.status) {
                  ele.time = val.time;
                  ele.isShow = true;
                }
              }
            }
          }
          this.spinShow = false;
        })
        .catch((err) => {
          console.log(err);
          this.spinShow = false;
        });
    },
    toPageFun(item, index) {
      this.chooseIndex = index;
      this.$router.push(item.path);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";
::v-deep .ivu-modal-header {
  background-image: url("~@/assets/images/modal_back900.png");
}
.boxFlex_styl {
  display: flex;
  align-items: center;
  .stepAllLine_styl {
    width: 100%;
    margin-bottom: 13px;
    .stepTime_styl {
      height: 20px;
      width: 100%;
      color: #52a0f3;
      text-align: center;
    }
  }
}
.stepTitle_styl {
  height: 20px;
  width: 100%;
  color: #938f8f;
  text-align: center;
}
.stepTitleLight_styl {
  height: 20px;
  width: 100%;
  color: #52a0f3;
  text-align: center;
}

.stepMiddle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item_styl {
    width: 25%;
    border: 0;
    outline: none;
  }
  .stepL_styl {
    width: 38%;
    height: 10px;
    margin-right: -0.5%;
    background: #f2f2f2;
  }
  .stepLineL_styl {
    width: 38%;
    height: 10px;
    margin-right: -0.5%;
    background: #52a0f3;
  }
  .stepLineR_styl {
    width: 38%;
    height: 10px;
    margin-left: -0.5%;
    background: #52a0f3;
  }
  .stepR_styl {
    width: 38%;
    height: 10px;
    margin-left: -0.5%;
    background: #f2f2f2;
  }
  .stepEmp_styl {
    width: 37.5%;
    height: 10px;
    background: transparent;
  }
}
.detail_styl {
  .title_styl {
    .flex-x(flex-start);
    position: relative;
    margin-top: 16px;
    padding: 6px;
    font-weight: bold;
    background-color: #f2f3f5;
    .line_styl {
      width: 6px;
      height: 16px;
      margin: 0 10px 0 6px;
      background-color: #129bff;
    }
    .name_styl {
    }
  }
}

.billOrder_styl {
  width: 100%;
}
.modal_styl {
  position: relative;
  padding-bottom: 50px;
}
.title_styl {
  color: #000000;
  border-left: 3px solid @themeColor;
  position: relative;
  padding-left: 10px;

  &::after {
    content: "";
    width: 2px;
    height: 12px;
    position: absolute;
    left: 0;
    top: 4px;
  }
}
.formInfo {
  margin: 10px 0 30px 0;

  .ivu-form-item {
    margin-bottom: 0;
    border-top: #e8eaec 1px solid;
    @{deep} label {
      padding-left: 5px;
      border-right: 1px #e8eaec solid;
      background-color: #f8f8f9;
    }
    @{deep} .ivu-form-item-content {
      padding-left: 8px;
      padding-right: 8px;
      white-space: nowrap;
    }
  }

  @{deep} .overHeight label {
    height: 65px;
  }
  @{deep} .overHeight .ivu-form-item-content {
    height: 65px;
  }
  @{deep} .overHeightMap label {
    height: 150px;
  }
  @{deep} .overHeightMap .ivu-form-item-content {
    height: 150px;
  }
}
.blueColor {
  color: #52a0f3;
}
.blueLine {
  border: 3px #52a0f3 solid;
}
.grayLine {
  border: 3px #f2f2f2 solid;
}
.borderLeft {
  border-left: #e8eaec 1px solid;
}
.borderRight {
  border-right: #e8eaec 1px solid;
}
.borderBottom {
  border-bottom: #e8eaec 1px solid;
}
.borderTop {
  border-top: #e8eaec 1px solid;
}
.content-styl {
  width: 100%;

  .ivu-tabs-bar {
    margin-bottom: 0; //去掉tabs的margin
  }
}

.ivu-modal-content {
  border-radius: 12px;
}
/deep/.ivu-modal-body {
  padding: 20px 40px;
}
</style>
